Ext.define('Writer.Form', {
    extend: 'Ext.form.Panel',
    alias: 'widget.writerform',

    requires: ['Ext.form.field.Text'],

    initComponent: function() {
        this.addEvents('create');
        Ext.apply(this, {
            activeRecord: null,
            iconCls: 'icon-user',
            frame: true,
            title: '用户编辑',
            defaultType: 'textfield',
            //bodyPadding: 5,
            fieldDefaults: {
                anchor: '100%',
                labelAlign: 'right'
            },
            items: [{
                fieldLabel: '工号',
                name: 'LoginID',
                allowBlank: false
}, {
                fieldLabel: '姓名',
                name: 'UserName',
                allowBlank: false
            }, {
                fieldLabel: '邮箱',
                name: 'mail',
                allowBlank: true,
                vtype: 'email'
            }],
                dockedItems: [{
                    xtype: 'toolbar',
                    dock: 'bottom',
                    ui: 'footer',
                    items: ['->', {
                        iconCls: 'icon-save',
                        itemId: 'save',
                        text: '保存',
                        disabled: true,
                        scope: this,
                        handler: this.onSave
                    }, {
                        iconCls: 'icon-user-add',
                        text: '新建',
                        scope: this,
                        handler: this.onCreate
                    }, {
                        iconCls: 'icon-reset',
                        text: '消除',
                        scope: this,
                        handler: this.onReset
}]
}]
                    });
                    this.callParent();
                },

                setActiveRecord: function(record) {
                    this.activeRecord = record;
                    if (record) {
                        this.down('#save').enable();
                        this.getForm().loadRecord(record);
                    } else {
                        this.down('#save').disable();
                        this.getForm().reset();
                    }
                },

                onSave: function() {
                    var active = this.activeRecord,
            form = this.getForm();

                    if (!active) {
                        return;
                    }
                    if (form.isValid()) {
                        form.updateRecord(active);
                        this.onReset();
                    }
                },

                onCreate: function() {
                    var form = this.getForm();

                    if (form.isValid()) {
                        this.fireEvent('create', this, form.getValues());
                        form.reset();
                    }

                },

                onReset: function() {
                    this.setActiveRecord(null);
                    this.getForm().reset();
                }
            });

            Ext.define('Writer.Grid', {
                extend: 'Ext.grid.Panel',
                alias: 'widget.writergrid',

                requires: [
        'Ext.grid.plugin.CellEditing',
        'Ext.form.field.Text',
        'Ext.toolbar.TextItem'
    ],

                initComponent: function() {

                    this.editing = Ext.create('Ext.grid.plugin.CellEditing');

                    Ext.apply(this, {
                        iconCls: 'icon-grid',
                        frame: true,
                        plugins: [this.editing],
                        dockedItems: [{
                            xtype: 'toolbar',
                            items: [{
                                iconCls: 'icon-add',
                                text: '增加',
                                scope: this,
                                handler: this.onAddClick
                            }, {
                                iconCls: 'icon-delete',
                                text: '删除',
                                disabled: true,
                                itemId: 'delete',
                                scope: this,
                                handler: this.onDeleteClick
}]
                            },  {
                                    weight: 1,
                                    xtype: 'toolbar',
                                    dock: 'bottom',
                                    ui: 'footer',
                                    items: ['->', {
                                        iconCls: 'icon-save',
                                        text: 'Sync',
                                        scope: this,
                                        handler: this.onSync
}]
}],
                                        columns: [{
                                            text: 'id',
                                            width: 40,
                                            sortable: true,
                                            dataIndex: 'id'
                                        }, {
                                            header: '工号',
                                            width: 100,
                                            sortable: true,
                                            dataIndex: 'LoginID',
                                            field: {
                                                type: 'textfield'
                                            }
                                        }, {
                                            header: '姓名',
                                            width: 100,
                                            sortable: true,
                                            dataIndex: 'UserName',
                                            field: {
                                                type: 'textfield'
                                            }
                                        }, {
                                            header: '邮箱',
                                            flex: 1,
                                            sortable: true,
                                            dataIndex: 'mail',
                                            field: {
                                                type: 'textfield'
                                            }
                                        }]
                                        });
                                        this.callParent();
                                        this.getSelectionModel().on('selectionchange', this.onSelectChange, this);
                                    },

                                    onSelectChange: function(selModel, selections) {
                                        this.down('#delete').setDisabled(selections.length === 0);
                                    },

                                    onSync: function() {
                                        this.store.sync();
                                    },

                                    onDeleteClick: function() {
                                        var selection = this.getView().getSelectionModel().getSelection()[0];
                                        if (selection) {
                                            this.store.remove(selection);
                                        }
                                    },

                                    onAddClick: function() {
                                        var rec = new Writer.Person({
                                            UserName: '',
                                            last: '',
                                            email: ''//,id:10
                                        }), edit = this.editing;

                                        edit.cancelEdit();
                                        this.store.insert(0, rec);
                                        edit.startEditByPosition({
                                            row: 0,
                                            column: 1
                                        });
                                    }
                                });

                                Ext.define('Writer.Person', {
                                    extend: 'Ext.data.Model',
                                    fields: [{
                                    name: 'id',
                                        useNull:true
                                    }, 'mail', 'UserName', 'LoginID'],
                                    validations: [{
                                        type: 'length',
                                        field: 'mail',
                                        min: 0
                                    }, {
                                        type: 'length',
                                        field: 'UserName',
                                        min: 1
                                    }, {
                                        type: 'length',
                                        field: 'LoginID',
                                        min: 1
}]
                                    });

                                    Ext.require([
    'Ext.data.*',
    'Ext.tip.QuickTipManager',
    'Ext.window.MessageBox'
]);

                                    Ext.onReady(function() {
                                        Ext.tip.QuickTipManager.init();
                                        var store = Ext.create('Ext.data.Store', {
                                            model: 'Writer.Person',
                                            autoLoad: true,
                                            autoSync: true,
                                            proxy: {
                                                type: 'ajax',
                                                api: {
                                                read: 'sysUserAjax.aspx?action=read',
                                                create: 'sysUserAjax.aspx?action=create',
                                                update: 'sysUserAjax.aspx?action=update',
                                                destroy: 'sysUserAjax.aspx?action=delete'
                                                },
                                                reader: {
                                                    type: 'json',
                                                    successProperty: 'success',
                                                    root: 'data',
                                                    messageProperty: 'message'
                                                },
                                                writer: {
                                                    type: 'json',
                                                    //writeAllFields: false,
                                                    root: 'data'
                                                },
                                                listeners: {
                                                    exception: function(proxy, response, operation) {
                                                        Ext.MessageBox.show({
                                                            title: 'REMOTE EXCEPTION',
                                                            msg: operation.getError(),
                                                            icon: Ext.MessageBox.ERROR,
                                                            buttons: Ext.Msg.OK
                                                        });
                                                    }
                                                }
                                            },
                                            listeners: {
                                                write: function(proxy, operation) {
                                                    if (operation.action == 'destroy') {
                                                        main.child('#form').setActiveRecord(null);
                                                    }
                                                    //this.msg(operation.action, operation.resultSet.message);
                                                }
                                            },

                                            msg: function(title, format) {
                                                if (!msgCt) {
                                                    msgCt = Ext.DomHelper.insertFirst(document.body, { id: 'msg-div2' }, true);
                                                }
                                                var s = Ext.String.format.apply(String, Array.prototype.slice.call(arguments, 1));
                                                var m = Ext.DomHelper.append(msgCt, createBox(title, s), true);
                                                m.hide();
                                                m.slideIn('t').ghost("t", { delay: 1000, remove: true });
                                            }
                                        });
                                        var msgCt;
                                        var main = Ext.create('Ext.container.Container', {
                                            //padding: '0 0 0 20',
                                            width: 700,
                                            height: 350,
                                            renderTo: document.body,
                                            layout: {
                                                type: 'hbox',
                                                align: 'stretch'
                                            },
                                            items: [{
                                                itemId: 'grid',
                                                xtype: 'writergrid',
                                                title: '用户列表',
                                                width: 350,

                                                store: store,
                                                listeners: {
                                                    selectionchange: function(selModel, selected) {
                                                        main.child('#form').setActiveRecord(selected[0] || null);
                                                    }
                                                }
                                            }, {
                                                itemId: 'form',
                                                xtype: 'writerform',
                                                flex: 1,
                                                //margins: '0 0 10 0',
                                                listeners: {
                                                    create: function(form, data) {
                                                        //data["id"] = 11;
                                                        store.insert(0, data);
                                                    }
                                                }
}]
                                            });
                                            //main.show();
                                        });
